<template>
    <!-- <h4 style="color: #E12210;">法援覆盖情况</h4> -->
    <div id="left-c" ></div>
</template>

<script setup lang="ts">
    import * as echarts from 'echarts';
    import { onMounted, ref } from 'vue';
    const chart = ref();
    onMounted(() => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('left-c')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        color: ['#E12120', '#FBE166', '#F59A91',],
        // title: {
        //     text: 'Customized Radar Chart'
        // },
        // legend: {},
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        radar: [
            {
                indicator: [
                    { text: '工作站' },
                    { text: '法援中心' },
                    { text: '管理处（科）' },
                ],
                center: ['25%', '50%'],
                radius: 90,
                startAngle: 50,
                splitNumber: 3,
                // shape: 'circle',
                // nmeGap: 15,
                axisName: {
                    formatter: '{value}',
                    color: '#63130C'
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                        shadowColor: 'rgba(0, 0, 0, 0.0)',
                        shadowBlur: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 127, 80, 0.0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(160, 82, 45, 0.3)',
                        width: 2,
                    }
                }
            },
        ],
        series: [
            {
                type: 'radar',
                emphasis: {
                    lineStyle: {
                        width: 6
                    }
                },
                data: [
                    {
                        value: [100, 50, 200],
                        name: '工作站',
                        lineStyle: {                // 单项线条样式。
                            normal: {
                                opacity: 0.7
                            },
                        },
                        areaStyle: {
                            color: 'rgba(255, 0, 0, 0.5)'
                        }
                    },
                    {
                        value: [60, 50, 250],
                        name: '法援中心',
                        lineStyle: {                // 单项线条样式。
                            normal: {
                                opacity: 0.7
                            },
                        },
                        areaStyle: {
                            color: 'rgba(255, 255, 0, 0.5)'
                        }
                    },
                    {
                        value: [300, 30, 220],
                        name: '管理处（科）',
                        lineStyle: {                // 单项线条样式。
                            normal: {
                                opacity: 0.7
                            },
                        },
                        areaStyle: {
                            color: 'rgba(255, 183, 193, 0.5)'
                        }
                    },
                ]
            },
        ]
        };
        option && myChart.setOption(option);
})


</script>


<style>
#left-c{
    /* height: 100%;
    width: 100%; */
    width: 110%;
    height: 100%;
    left: 20%;
} 

</style>